<!-- 地址列表 -->
<template>
	<view class="address-wrap">
		<shopro-login-modal></shopro-login-modal>
		<view class="address-list" v-for="address in addressList" :key="address.id" @tap="useAddress(address)">
			<view class="top u-flex">
				<text class="name">{{ address.username }}</text>
				<text class="phone">{{ address.mobile }}</text>
				<text class="tag" v-show="address.isdefault">默认</text>
			</view>
			<view class="detail">
				<!-- {{address.province}} -->
				{{ address.province }}{{ address.city }}{{ address.district }}
			</view>
			<button class="u-reset-button set-btn"
				@tap.stop="jump('/pages/prefile/address/edit', { id: address.id })">编辑</button>
		</view>

		<view class="foot_box-wrap safe-area-inset-bottom">
			<view class="foot_box u-flex u-row-between safe-area-inset-bottom">
				<button class="u-reset-button add-btn u-m-20"
					@tap="jump('/pages/prefile/address/edit')">添加新的收货地址</button>
			</view>
		</view>
		<!-- 登录提示 -->
		<!-- <shopro-auth-modal></shopro-auth-modal> -->
	</view>
</template>

<script>
	// import {
	// 	addressList
	// } from './../personal.js'
	export default {
		components: {},
		data() {
			return {
				addressList: [],
				prams: {
					i: 4,
					type: 2,
					route: 'member.member-address.index',
					ingress: "weChatApplet",
					validate_page: '1',
					app_type: 'wechat'
				}
			};
		},
		computed: {},
		onLoad() {},
		onShow() {
			this.getAddressList();
		},
		methods: {
			// 选中
			useAddress(addressData) {
				uni.$emit('SELECT_ADDRESS', {
					addressData: JSON.stringify(addressData)
				});
				this.$Router.back();
			},
			// 路由跳转
			jump(path, parmas = {}) {
				
				this.$Router.push({
					path: path,
					query: parmas
				});
				// uni.navigateTo({
				// 	url: path,
				// 	query: parmas
				// })
			},
			getAddressList() {
				this.$api.get('/addons/yun_shop/api.php?route=member.member-address.index', this.prams).then(res => {
					this.addressList = res.data;
					!this.addressList.length && uni.$emit('SELECT_ADDRESS', {
						addressData: null
					});
				});
				// this.addressList = [{
				// 	"id": 65,
				// 	"customer_id": 25,
				// 	"status_default": 100,
				// 	"addr_name": "测试",
				// 	"addr_phone": "15382852045",
				// 	"addr_main": "北京北京昌平百善镇小果科技",
				// 	"addr_addrdet": "小果科技"
				// }]
				// this.$http('address.list').then(res => {
				// 	if (res.code === 1) {
				// 		this.addressList = res.data;
				// 		!this.addressList.length && uni.$emit('SELECT_ADDRESS', {
				// 			addressData: null
				// 		});
				// 	}
				// });
			}
		}
	};
</script>

<style lang="scss">
	.address-list {
		padding: 40rpx;
		position: relative;
		background: #fff;
		margin-bottom: 20rpx;

		.name {
			font-size: 30rpx;
			font-weight: 600;
		}

		.phone {
			font-size: 30rpx;
			margin: 0 20rpx;
		}

		.tag {
			background: rgba(233, 191, 113, 0.2);
			border-radius: 6rpx;
			padding: 0 16rpx;
			line-height: 38rpx;
			color: #a8700d;
			font-size: 22rpx;
		}

		.detail {
			margin-top: 25rpx;
			width: 543rpx;
			font-size: 26rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 40rpx;
		}

		.set-btn {
			background: none;
			position: absolute;
			font-size: 26rpx;
			color: #a8700d;
			top: 40rpx;
			right: 40rpx;
		}
	}

	// 底部按钮
	.foot_box-wrap {
		height: 140rpx;
		width: 100%;
	}

	.foot_box {
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid rgba(#ccc, 0.2);

		.sync-wxaddress {
			flex: 1;
			line-height: 80rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 40rpx;
			box-shadow: 0 0 1rpx 6rpx rgba(#ccc, 0.2);
		}

		.add-btn {
			line-height: 80rpx;
			flex: 1;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>
